import { fetcher } from '@/src/utils/fetcher'
import Case from '../../components/case'
import { cookies } from 'next/headers'
import Paginator from '../../components/paginator'

interface PageProps {
  searchParams: {
    page?: string
  }
}

const Page: React.FC<PageProps> = async (props) => {
  const { searchParams } = props

  const cookieStore = cookies()
  const cases = (await fetcher<WithPaginator<Case>>(
    `/api/index/caseList?page=${searchParams.page}`,
    { cookieStore }
  )) || { list: [], p: 0, total: 0 }

  return (
    <>
      <div className='grid grid-cols-1 gap-[0.9375rem] lg:grid-cols-3 lg:gap-4 2xl:gap-6'>
        {cases.list.map((item) => {
          return (
            <Case
              key={item.id}
              id={item.id.toString()}
              picture={item.image}
              title={item.title}
              desc={item.con}
            />
          )
        })}
      </div>
      <div className='h-[1.875rem] lg:h-[2.5rem] 2xl:h-[3.75rem]' />
      <Paginator
        initialPage={Number(searchParams.page) || 1}
        total={Math.ceil(cases.total / cases.p)}
      />
      <div className='h-[2.34475rem] lg:h-[3.1875rem] 2xl:h-[4.78125rem]' />
    </>
  )
}

export default Page
